<template>
  <div>
    <div class="page" v-loading="loading">
      <!-- 筛选部分 -->
      <el-tabs
        v-model="modelProvider"
        tab-position="left"
        class="tabs"
        @tab-click="clickModelProvider"
      >
        <el-tab-pane
          :key="item.name"
          v-for="item in modelProviderList"
          :name="item.provider"
          :label="item.name"
        ></el-tab-pane>
      </el-tabs>
      <el-table
        :data="modelList"
        max-height="560"
        style="width: 100%"
        class="table"
      >
        <el-table-column prop="id" label="模型id" width="160">
        </el-table-column>
        <el-table-column prop="model_name" label="模型名字" width="120">
        </el-table-column>
        <el-table-column prop="name" label="模型描述" width="180">
        </el-table-column>
        <el-table-column prop="provider" label="模型供应商" width="120">
        </el-table-column>
        <el-table-column prop="model_type" label="模型类型" width="100">
        </el-table-column>
        <el-table-column prop="permission_type" label="私有/公共" width="110">
        </el-table-column>

        <el-table-column prop="user_id" label="知识库用户id"> </el-table-column>
      </el-table>
    </div>
    <el-button
      class="addmodel"
      size="small"
      type="primary"
      @click="clickAddModel"
      >添加模型</el-button
    >
    <!-- 添加模型对话框 -->
    <el-dialog
      title="添加模型"
      :visible.sync="dialogAddModel"
      width="35%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <el-form :model="modelForm" size="small">
        <el-form-item label="模型名称">
          <el-input v-model="modelForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="基础模型:coze的botId">
          <el-input
            v-model="modelForm.model_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <div class="flex1">
          <el-form-item label="模型类型">
            <el-input
              v-model="modelForm.model_type"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="权限">
            <el-input
              v-model="modelForm.permission_type"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex1">
          <el-form-item label="BOT ID">
            <el-input
              v-model="modelForm.credential.bot_id"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="USER ID">
            <el-input
              v-model="modelForm.credential.user"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item label="API域名">
          <el-input
            v-model="modelForm.credential.coze_api_base"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="API KEY">
          <el-input
            v-model="modelForm.credential.coze_api_key"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddModel = false">取 消</el-button>
        <el-button type="primary" @click="clickConfirmAddModel"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { post } from "@/common/request";
import { toast } from "@/common/tools";
import { mapState } from "vuex";
import createVue from "./components/create.vue";
import editVue from "./components/edit.vue";
import scanVue from "./components/scan.vue";
import syncVue from "./components/sync.vue";
export default {
  components: {
    createVue,
    editVue,
    scanVue,
    syncVue,
  },
  data() {
    return {
      loading: false,
      createDialog: false,
      editDialog: false,
      scanDialog: false,
      // 添加模型对话框是否显示
      dialogAddModel: false,
      // 添加模型的表单
      modelForm: {
        // 模型名称
        name: "",
        // 模型类型
        model_type: "LLM",
        // 权限
        permission_type: "PRIVATE",
        // 模型供应商
        provider: this.modelProvider,
        // 自定义模型
        model_name: "bot-",
        credential: {
          // coze账号的id
          user: "2102144826",
          // coze机器人botid
          bot_id: "",
          // api域名
          coze_api_base: "https://api.coze.cn",
          // API Key
          coze_api_key:
            "pat_3e8eBYVT0wHO3H6jyyfiWDso5w9qgnMHSJWylYwPGKZfE4Tni9tdIPnW0mJToHP3",
        },
      },
      status: "",
      // 模型类型列表
      modelProviderList: [],
      // 展示的模型列表
      modelList: [],
      // 模型类型
      modelProvider: "model_coze_provider",
      key: "",
      isEmpty: false,
      syncId: "",
      pageNum: 1,
      pageSize: 15,
      total: 0,
      id: "",
    };
  },
  created() {
    this.list = [];
    this.modelTypeList();
    this.getModelList(this.modelProvider);
  },

  watch: {
    loginoutRandom() {
      this.reStart();
    },
  },

  computed: {
    ...mapState({
      userPackageInfo: (state) => state.userPackageInfo,
      loginoutRandom: (state) => state.loginoutRandom,
    }),
  },

  methods: {
    callback() {
      this.reStart();
      this.$refs.syncRef.setTime();
      this.$refs.syncRef.setTime1();
      this.syncDialog = true;
    },

    reStart() {
      this.pageNum = 1;
      this.list = [];
      this.modelTypeList();
    },

    // 获取模型类型
    modelTypeList() {
      this.$post("/front/dataset/modelProviderList").then((res) => {
        if (res.data.code === 0) {
          this.modelProviderList = res.data.obj;
        }
      });
    },

    // 获取模型列表
    getModelList(name) {
      this.$post("/front/dataset/providerModelList", {
        provider: name,
      }).then((res) => {
        if (res.data.code === 0) {
          this.modelList = res.data.obj;
          this.loading = false;
        } else {
          this.loading = false;
          toast(1, res.data.msg);
        }
      });
    },
    // 点击模型类型
    clickModelProvider(item) {
      console.log("模型类型", item.name);
      console.log("模型类型", item.label);
      console.log("展示的模型类型", this.modelProvider);
      this.getModelList(this.modelProvider);
    },
    // 点击添加模型
    clickAddModel() {
      this.dialogAddModel = true;
      console.log("点击添加模型", this.modelProvider);
    },
    // 点击确定按钮,点击添加模型对话框的确认按钮
    clickConfirmAddModel() {
      this.modelForm.provider = this.modelProvider;
      if (!this.modelForm.name) {
        toast(1, "请输入模型名称");
        return;
      }

      if (!this.modelForm.provider) {
        toast(1, "请选择模型类型");
        return;
      }
      if (!this.modelForm.credential.user) {
        toast(1, "请输入coze账号的用户id");
        return;
      }
      if (!this.modelForm.credential.bot_id) {
        toast(1, "请输入coze机器人的botId");
        return;
      }
      if (this.modelForm.model_name === "bot-" || !this.modelForm.model_name) {
        toast(1, "请输入扣子的botId");
        return;
      }
      if (
        this.modelForm.model_name !== `bot-${this.modelForm.credential.bot_id}`
      ) {
        toast(1, "两个botid不一致");
        return;
      }
      this.dialogAddModel = false;
      this.loading = true;
      post("/front/dataset/createModel", this.modelForm)
        .then((res) => {
          if (res.data.code === 0) {
            this.getModelList(this.modelProvider);
          } else {
            this.loading = false;
            toast(1, res.data.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.el-icon-search:before) {
  color: #aaa !important;
}
:deep(.el-icon-circle-close) {
  font-size: 18px !important;
  color: #409eff !important;
}
.page {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  padding: 10px 10px 0;
}
.useridtitle {
  width: 50px;
  line-height: 40px;
  text-align: center;
  font-weight: 600;
}
.userid {
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 13px;
  padding: 0 10px;
}
.wechatid {
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 13px;
  padding: 0 10px;
}
.wechatnametitle {
  width: 180px;
  line-height: 40px;
  text-align: center;
  font-weight: 600;
}
.wechatstatustitle {
  width: 100px;
  line-height: 40px;
  text-align: center;
  font-weight: 600;
}
.wechatname {
  width: 180px;
  line-height: 50px;
  text-align: center;
  font-size: 13px;
  padding: 0 10px;
}
.zhishikid {
  margin: 10px 0;
}
:deep(.el-table) {
  overflow: scroll;
}
.el-table::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
.caozuo {
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.addmodel {
  position: absolute;
  top: 90px;
  right: 40px;
}
.flex1 {
  display: flex;
  justify-content: space-between;
}
.tabs {
  height: 82vh;
}
</style>
